<template>
  <MyVanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar title="面试通知" left-arrow fixed @click-left="onClickLeft" />
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top my-info">
          <van-form @submit="sub">
            <van-cell-group>
              <van-popup v-model="showJob" position="bottom">
                <van-picker title="面试职位" show-toolbar :columns="jobs" value-key="jobName" @cancel="showJob=false" @confirm="jobConfirm" />
              </van-popup>
              <van-field v-model="postInfo.jobName" required clickable size="large" label="面试职位" placeholder="请选择" :rules="[{ required: true, message: '请选择面试职位' }]" style="font-size: 16px" @click="showJob=true" />
            </van-cell-group>

            <van-cell-group style="margin-top: 10px">
              <van-field v-model="postInfo.interviewDate" required size="large" label="面试时间" placeholder="请选择" :rules="[{ required: true, message: '请选择面试时间' }]" style="font-size: 16px" @click="showTime=true" />
              <van-popup v-model="showTime" position="bottom">
                <van-datetime-picker v-model="currentDate" type="datehour" title="面试时间" @cancel="showTime=false" @confirm="interviewDateConfirm" />
              </van-popup>

              <van-field v-model="postInfo.interviewAddr" required size="large" rows="1" label="面试地点" :autosize="{ maxHeight: 120, minHeight: 24 }" type="textarea" placeholder="请输入" :rules="[{ required: true, message: '请填写面试地点' }]" style="font-size: 16px" />

              <van-field v-model="postInfo.content" clickable size="large" label="通知内容" :autosize="{ maxHeight: 120, minHeight: 24 }" type="textarea" placeholder="请输入"  style="font-size: 16px" />
            </van-cell-group>

            <van-cell-group style="margin-top: 10px">
              <van-field v-model="postInfo.linkMan" required size="large" label="联系人" placeholder="请输入" :rules="[{ required: true, message: '请填写联系人' }]" style="font-size: 16px" />

              <van-field v-model="postInfo.linkTel" required clickable size="large" label="联系电话" placeholder="请输入" :rules="[{ required: true, message: '请填写联系电话' }]" style="font-size: 16px" />

              <van-cell v-show="isBind" required size="large" center title="短信通知" :value="companyPhone" style="color: #646566">
                <template #right-icon>
                  <van-switch v-model="postInfo.IsSendWithMsg" size="24" style="margin-left: 20px" />
                </template>
              </van-cell>
            </van-cell-group>

            <div style="margin: 16px">
              <van-button type="primary" block color="#07f" round style="font-size: 18px" :loading="loading" text="发送" native-type="submit"></van-button>
            </div>
          </van-form>
        </div>
        <!-- 内容 end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, Cell, CellGroup, Field, Switch, Picker, Popup, Button, DatetimePicker, Toast ,Form, Dialog} from "vant";
import MyVanskeleton from "@/components/MyVanskeleton.vue";
export default {
  name: "LivePlay",
  components: {
    MyVanskeleton,
    [NavBar.name]: NavBar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Switch.name]: Switch,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
		[Form.name]: Form
  },
  // 定义属性
  data() {
    return {
      //skeleton
      skeletonLoading: true,
      //date
      currentDate: new Date(),
      //interview info
      postInfo: {
				personIDEncrypt:'',
        jobID: '',
        jobName: '',
        interviewDate: '',
        interviewAddr: '',
        content: '',
        linkMan: '',
        linkTel: '',
        IsSendWithMsg: true,
      },
      //jobs
      jobs: [],
      //company phone
      companyPhone: '',
      //person phone
      isBind: false,
      personPhone: '',
      //popup
      showJob: false,
      showTime: false,
      //button
      loading: false,
      //requestCount
      requestCount: 3
    };
  },
  mounted() {
    this.postInfo.personIDEncrypt = this.$route.query.personIDEncrypt;
    this.getpersonPhone();
    this.getCompanyPhone();
    this.getCompanyJobsOnline();
    this.skeletonLoading = this.requestCount == 0;
  },
  // 方法集合
  methods: {
    getpersonPhone() {
      this.$api.get('/PersonAccount/GetMobileNumByCompany').then(res => {
        this.requestCount--;
        if (res.success) { this.isBind = true; this.IsSendWithMsg = true, this.personPhone = res.response; }
        else { this.isBind = false; this.IsSendWithMsg = false }
      })
    },
    getCompanyPhone() {
      this.$api.get('/CompanyAccount/GetMobileNum').then(res => {
        this.requestCount--;
        if (res.success) { this.postInfo.linkTel = res.response; }
      })
    },
    getCompanyJobsOnline() {
      this.$api.get('/CompanyStation/GetStationList4Interview').then(res => {
        this.requestCount--;
        if (res.success) {
          this.jobs = res.response;
        }
        else {
          Dialog.alert({ message: res.msg }).then(() => { this.$router.back() });
        }
      })
    },
    jobConfirm(value) {
      this.postInfo.jobID = value.jobID;
      this.postInfo.jobName = value.jobName;
      this.showJob = false;
    },
    interviewDateConfirm(value) {
      this.postInfo.interviewDate = this.$dayjs(value).format("YYYY-MM-DD HH:mm");
      this.showTime = false;
    },
    sub() {
      this.loading = true;
      // console.log(this.postInfo)
      this.$api.post('/CompanyResume/SendFaceNotice', this.postInfo).then(res => {
        this.loading = false;
        Dialog({message:res.msg}).then(()=>this.$router.back());
      })
    },
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>